
const path=require('path')
const EslintWebpackPlugin=require("eslint-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const getLoader=(prev)=>{
    return[
                "style-loader",
                "css-loader",
                {
                    // 处理css兼容性问题
                    // 配合package.json中browserslist中指定兼容性
                    loader:"postcss-loader",
                    options:{
                        postcssOptions:{
                            plugins:["postcss-preset-env"]
                        }
                    }

                }
           
     
        ,prev
    ].filter(Boolean)
}

module.exports={
    entry:"./src/main.js",
    output:{
        path:undefined,
        filename:"static/js/[name].js",
        chunkFilename:"static/js/[name].chunk.js",
        assetModuleFilename:"static/media/[hash:10][ext][query]"
    },
    module:{
        rules:[
            // 处理css
        {
            test:/\.css$/,
            use:getLoader()
        },
        {
            test:/\.sa[c]ss$/,
            use:getLoader("sass-loader")
        },
        {
            test:/\.less$/,
            use:getLoader("less-loader")
        },
        {
            test:/\.styl$/,
            use:getLoader("stylus-loader")
        },
        {
            test:/\.(jpe?g|png|gif|webp|svg)/,
            type:"asset",
            parser:{
                dataUrlCondition:{
                    maxSize:10*1024,
                }
            }
        },
        // 处理其他资源
        {
            test:/\.(woff2?|ttf)/,
            type:"asset/resource",
        },

        // 处理js和jsx
        {
            test: /\.(jsx|js)$/,
            include: path.resolve(__dirname, "../src"),
            loader: "babel-loader",
            options: {
              cacheDirectory: true,
              cacheCompression: false,
              plugins: [
                // "@babel/plugin-transform-runtime" // presets中包含了
                'react-refresh/babel'//激活js的HMR功能
              ],
            },
          },
        ]
    },

    // 处理html
    plugins:[
//         new EslintWebpackPlugin({
//             context: path.resolve(__dirname,"../src"),
//             exclude:"node_modules",
//             cache:true,
//             cacheLocation:path.resolve(__dirname,"../node_modules/cache/.eslintcache")
// }),
new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "../public/index.html"),
  }),
  new ReactRefreshWebpackPlugin()
    ],
    optimization: {
        splitChunks: {
          chunks: "all",
        },
        runtimeChunk: {
          name: (entrypoint) => `runtime~${entrypoint.name}`,
        },
      },
    //   webpack解析模块加载选项
    resolve:{
        // 自动补全文件扩展名
        extensions:[".js",".jsx",".json"]
    },
      devServer: {
        open: true,
        host: "localhost",
        port: 3002,
        hot: true,//开启HMR
        historyApiFallback:true,//解决前端路由刷新404问题
      
      },
    mode: "development",
    devtool: "source-map",



}